<template>
  <div class="product-detail-view">
    <div class="detail-container">
      <div class="product-detail-content">
        <div class="product-images">
          <img
            class="product-image"
            :src="products?.coverImg"
            alt="商品图片"
          />
          <div class="image-thumbnails">
            <img
              v-for="i in 4"
              :key="i"
              :src="pic1"
              alt="缩略图"
              class="thumbnail"
            />
          </div>
        </div>
        <div class="product-info">
          <h1 class="product-title">{{products?.title}}</h1>
          <div class="product-rating">
            <a-rate :value="4.5" disabled allow-half />
            <span class="rating-text">4.5分 (1234条评价)</span>
          </div>
          <div class="product-price-section">
            <div class="current-price">{{ "¥"+products?.discountedPrice }}</div>
            <div class="original-price">{{ "¥"+products?.price }}</div>
            <div class="discount-tag">{{ products?.discount }}</div>
          </div>
          <div class="product-options">
            <div class="option-item">
              <span class="option-label">规格：</span>
              <div class="option-values">
                <a-button size="small" type="primary">30ml</a-button>
                <a-button size="small">50ml</a-button>
                <a-button size="small">100ml</a-button>
              </div>
            </div>
            <div class="option-item">
              <span class="option-label">数量：</span>
              <a-input-number
                v-model:value="quantity"
                :min="1"
                :max="99"
                size="large"
              />
            </div>
          </div>
          <div class="product-actions">
            <a-button
              type="primary"
              size="large"
              class="buy-btn"
              @click="instantBuy"
            >
              <ShoppingCartOutlined />
              立即购买
            </a-button>
            <a-button size="large" class="cart-btn" @click="addToCart">
              <HeartOutlined />
              加入购物车
            </a-button>
          </div>
          <div class="product-meta">
            <div class="meta-item">
              <span class="meta-label">月销量：</span>
              <span class="meta-value">{{products?.sales}}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">店铺：</span>
              <span class="meta-value">{{ products?.storeName+"旗舰店" }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">发货地：</span>
              <span class="meta-value">上海</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品详情标签页 -->
      <div class="product-tabs">
        <a-tabs default-active-key="detail">
          <a-tab-pane key="detail" tab="商品详情">
            <div class="detail-content">
              <h3>产品介绍</h3>
              <p>
                兰蔻小黑瓶精华液是一款修护精华，能够改善肤质，提亮肤色，让肌肤更加年轻有活力。
              </p>
<!--              <img
                src=""
                alt="详情图"
              />-->
            </div>
          </a-tab-pane>
          <a-tab-pane key="reviews" tab="用户评价">
            <div class="reviews-content">
              <div v-for="i in 3" :key="i" class="review-item">
                <div class="review-header">
                  <a-avatar
                    src="https://yuwen-diagnosis-1325795131.cos.ap-guangzhou.myqcloud.com//public/1913835897733287938/avatar.jpg"
                  />
                  <div class="review-info">
                    <div class="reviewer-name">用户{{ i }}</div>
                    <a-rate :value="5" disabled size="small" />
                  </div>
                  <div class="review-date">2024-01-{{ i }}</div>
                </div>
                <div class="review-content">
                  非常好用的精华液，质地清爽不油腻，吸收很快，用了一段时间皮肤明显变好了。
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ShoppingCartOutlined, HeartOutlined } from "@ant-design/icons-vue";

const router = useRouter();
const route = useRoute();
const quantity = ref(1);
import pic1 from '@/assets/image/commodity1-1.png';
import {message} from "ant-design-vue";
import {getProductsVo} from "@/api/productController.ts";
import {addCartProducts} from "@/api/cartController.ts";

const products = ref<API.ProductsVO>();
const fetchProducts = async () => {
  try {
    const res = await getProductsVo({
      id: route.params.id
    });


    if (res.data.code === 0 && res.data.data) {
      products.value = res.data.data;
    } else {
      message.error('获取商品详情失败: ' + res.data.msg);
      await router.push('/');
    }
  } catch (error) {
    message.error('加载商品详情出错');
    console.error(error);
  }
};
onMounted(() => {
  fetchProducts();
});
// 商品信息
const productInfo = {
  id: route.params.id || 1,
  name: "兰蔻小黑瓶精华液",
  price: 899,
  originalPrice: 1299,
  image: pic1,
  shop: "兰蔻官方旗舰店",
  spec: "30ml",
};

const instantBuy = () => {
  // 构建订单信息

  // 跳转到支付结算页面
  router.push(`/checkout/${route.params.id}`);
};

const addToCart = async () => {
  try {
    const params = {
      productId: route.params.id
    }
    const res =  await addCartProducts(params)

    if(res.data.data && res.data.code===0){
      // console.log("添加到购物车:", productInfo, quantity.value);
      message.success("加入购物车成功")
    }else{
      message.error("加入购物车失败",res.data.msg)
    }
  }catch (e){
    console.log('addToCart 发生错误:', e.message)
    message.error("加入购物车失败",e.message)
  }



};
</script>

<style scoped>
.product-detail-view {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 64px);
  width: 100%;
  padding: 32px 0 0 0;
}

.detail-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 24px;
}

.product-detail-content {
  display: flex;
  gap: 48px;
  background: white;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 32px;
  align-items: flex-start;
}

.product-images {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-image {
  width: 380px;
  height: 380px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08);
  background: #f8f9fa;
}

.image-thumbnails {
  display: flex;
  gap: 10px;
}

.thumbnail {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  background: #f5f5f5;
}

.thumbnail:hover {
  border-color: #667eea;
}

.product-info {
  flex: 1;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.product-title {
  font-size: 30px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
  line-height: 1.2;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.rating-text {
  color: #888;
  font-size: 15px;
}

.product-price-section {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
  padding: 18px 0;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 18px;
}

.current-price {
  font-size: 32px;
  font-weight: 700;
  color: #ff4757;
}

.original-price {
  font-size: 18px;
  color: #bbb;
  text-decoration: line-through;
}

.discount-tag {
  background: #ff4757;
  color: white;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  margin-left: 8px;
}

.product-options {
  margin-bottom: 8px;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.option-label {
  width: 60px;
  color: #666;
  font-weight: 500;
}

.option-values {
  display: flex;
  gap: 10px;
}

.product-actions {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
}

.buy-btn {
  flex: 1;
  height: 48px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
}

.cart-btn {
  width: 140px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
}

.product-meta {
  border-top: 1px solid #e8e8e8;
  padding-top: 16px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  gap: 4px;
  font-size: 15px;
  color: #666;
}

.meta-label {
  color: #888;
}

.meta-value {
  color: #333;
  font-weight: 500;
}

.product-tabs {
  background: white;
  border-radius: 16px;
  padding: 24px 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.detail-content h3 {
  margin-bottom: 16px;
  color: #333;
  font-size: 20px;
}

.detail-content p {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #666;
}

.detail-content img {
  width: 100%;
  border-radius: 8px;
  margin-top: 20px;
}

.reviews-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-info {
  flex: 1;
}

.reviewer-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.review-date {
  color: #999;
  font-size: 12px;
}

.review-content {
  color: #666;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .detail-container {
    padding: 0 8px;
  }
  .product-detail-content {
    gap: 24px;
    padding: 24px 8px;
  }
  .product-images {
    flex: 0 0 320px;
  }
  .product-image {
    width: 260px;
    height: 260px;
  }
}
@media (max-width: 900px) {
  .product-detail-content {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 0;
  }
  .product-images {
    align-items: flex-start;
    margin: 0 auto 12px auto;
  }
  .product-image {
    width: 100%;
    max-width: 320px;
    height: 200px;
    margin: 0 auto 12px auto;
  }
}
@media (max-width: 600px) {
  .detail-container {
    padding: 0 2px;
  }
  .product-detail-content {
    padding: 8px 0;
    gap: 12px;
    border-radius: 0;
    box-shadow: none;
  }
  .product-tabs {
    padding: 8px 2px;
    border-radius: 0;
    box-shadow: none;
  }
  .product-image {
    max-width: 100vw;
    height: 120px;
  }
  .thumbnail {
    width: 32px;
    height: 32px;
  }
  .product-title {
    font-size: 18px;
  }
  .current-price {
    font-size: 20px;
  }
  .buy-btn,
  .cart-btn {
    height: 38px;
    font-size: 15px;
  }
  .meta-item {
    font-size: 13px;
  }
}
</style>
